<template>
	<view class="register-container">
		<view class="register-box">
			<text class="title">注册</text>
			<view class="input-group">
				<input type="text" placeholder="请输入用户名" class="input" v-model="username" />
			</view>
			<view class="input-group">
				<input type="password" placeholder="请输入密码" class="input" v-model="password" />
			</view>
			<view class="input-group">
				<input type="password" placeholder="请确认密码" class="input" v-model="confirmPassword" />
			</view>
			<button class="register-btn" @click="handleRegister">注册</button>
			<view class="navigate-text">
				<text>已有账号？</text>
				<navigator url="/pages/Login/Login" class="navigate-link">去登录</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: '',
				confirmPassword: ''
			};
		},
		methods: {
			handleRegister() {
				if (!this.username) {
					return uni.showToast({
						title: '请输入用户名',
						icon: 'none'
					});
				}
				if (!this.password) {
					return uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
				}
				if (this.password !== this.confirmPassword) {
					return uni.showToast({
						title: '两次密码不一致',
						icon: 'none'
					});
				}

				// 注册流程
				uni.showLoading({
				  title: '注册中...'
				});
				uniCloud.callFunction({
				  name: 'addUser',
				  data: {
				    'name': this.username,
				    'password': this.password
				  },
				  success: (msg) => {
				    console.log("adduser callback " + JSON.stringify(msg));
				    setTimeout(() => {
				      uni.hideLoading();
				      uni.showToast({
				        title: "注册成功"
				      });
				      uni.navigateBack();
				    }, 1000);
				  },
				  fail: (error) => { // 补充逗号分隔，修正语法
				    console.error('addUser fail' + error);
				    uni.hideLoading();
				    uni.showToast({
				      title: "注册失败",
				      icon: 'none'
				    });	
			}
		});
		}
		}
	};
</script>

<style>
	.register-container {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	.register-box {
		width: 80%;
		max-width: 400px;
		background-color: #fff;
		padding: 20px;
		border-radius: 8px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	}

	.title {
		display: block;
		text-align: center;
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 20px;
	}

	.input-group {
		margin-bottom: 15px;
	}

	.input {
		width: 100%;
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 4px;
	}

	.register-btn {
		width: 100%;
		background-color: #007aff;
		color: #fff;
		border-radius: 4px;
		padding: 10px;
		font-size: 16px;
	}

	.register-btn:active {
		background-color: #0062cc;
	}

	.navigate-text {
		text-align: center;
		margin-top: 15px;
		font-size: 14px;
	}

	.navigate-text text,
	.navigate-text navigator {
		display: inline-block;
	}

	.navigate-link {
		color: #007aff;
		text-decoration: none;
		margin-left: 4px;
	}
</style>